<template>
  <div>
    <div class="app cont1200 footerBOX">
      <div style=" height: 290px;">
        <div class="footerIcoList clear">
          <div class="f-l" v-for="item in icoList" :key="item.id">
            <i :class="item.ico" class="f-l"></i>
            <span class="span1">{{item.title}}</span>
            <span class="span2">{{item.msg}}</span>
          </div>
        </div>

        <div class="hrbox"></div>

        <el-row>
          <el-col :span="10">
            <div class="grid-content bg-purple">
              <ul class="footerM" v-for="item in footerM" :key="item.id">
                <span>{{item.title}}</span>
                <li v-for="msgdata in item.listMsg" :key="msgdata.id">{{msgdata}}</li>
              </ul>
            </div>
          </el-col>
          <el-col :span="6">
            <p class="lxp1">400-073-0806</p>
            <div class="lxhr"></div>
            <p class="xlcom">qj361-kf@msyc.com.cn</p>
            <!-- <p>联系我们</p> -->
          </el-col>

          <el-col :span="8">
            <el-tabs tab-position="right" style="height: 200px;">
              <el-tab-pane label="公众号">
                <img
                  class="lxfsimg"
                  src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565934071863&di=17630cd964b9610f8cb607ebb2244496&imgtype=0&src=http%3A%2F%2Fimg1.cache.netease.com%2Fcatchpic%2F1%2F1A%2F1A2C00CA70DA8F6B91F819F437537253.jpg"
                  alt
                />
              </el-tab-pane>
              <el-tab-pane label="微博">
                <img
                  class="lxfsimg"
                  src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565934071863&di=17630cd964b9610f8cb607ebb2244496&imgtype=0&src=http%3A%2F%2Fimg1.cache.netease.com%2Fcatchpic%2F1%2F1A%2F1A2C00CA70DA8F6B91F819F437537253.jpg"
                  alt
                />
              </el-tab-pane>
              <el-tab-pane label="QQ">
                <img
                  class="lxfsimg"
                  src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565934071863&di=17630cd964b9610f8cb607ebb2244496&imgtype=0&src=http%3A%2F%2Fimg1.cache.netease.com%2Fcatchpic%2F1%2F1A%2F1A2C00CA70DA8F6B91F819F437537253.jpg"
                  alt
                />
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </div>
      <!-- <div class="footImg">
    <p>© 2007-2019 Tuhu.cn Corporation, All Rights Reserved 上海阑途信息技术有限公司 版权所有 沪ICP备11004912号-2</p>

      <img
        alt
        src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201811/moban3342/image/payment/mastero.jpg"
      />
      <img
        alt
        src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201811/moban3342/image/payment/mastero.jpg"
      />
      </div>-->
    </div>

    <div class="footer-info">
      <div class="info-text">
        <!-- 底部导航 -->
        <p class="qualified">
          <a href="http://www.68mall.com" target="_blank">
            <img
              src="http://68dsw.oss-cn-beijing.aliyuncs.com/demo/backend/1/images/2017/08/25/15036462103051.png"
              alt="经营性网址备案信息"
            />
          </a>

          <a href="http://www.68mall.com" target="_blank">
            <img
              src="http://68dsw.oss-cn-beijing.aliyuncs.com/demo/backend/1/images/2017/08/25/15036462201400.png"
              alt="诚信网站"
            />
          </a>
        </p>
        <p class="nav-bottom">
          <a href="http://www.68mall.com/company" target="_blank">公司简介</a>

          <em>|</em>

          <a href="http://www.68mall.com/help/4.html" target="_blank">联系我们</a>

          <em>|</em>

          <a href="http://www.68mall.com/agent.html" target="_blank">代理合作</a>

          <em>|</em>

          <a href="/help/2.html" target="_blank">帮助中心</a>

          <em>|</em>

          <a href="/shop/apply.html" target="_blank">商家入驻</a>

          <em>|</em>

          <a href="http://www.68mall.com/company" target="_blank">联系我们</a>
        </p>

        <p>
          Copyright 秦皇岛商之翼(www.68mall.com) 版权所有
          <a
            href="http://www.beian.miit.gov.cn/"
            target="_blank"
          >冀ICP备07501206号-2</a>
        </p>
        <p class="company-info" style="display: none;">秦皇岛市海港区XXX</p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      icoList: [
        { ico: "el-icon-odometer", title: "正品低价", msg: "各大厂商直接供货" },
        { ico: "el-icon-odometer", title: "正品低价", msg: "各大厂商直接供货" },
        { ico: "el-icon-odometer", title: "正品低价", msg: "各大厂商直接供货" },
        { ico: "el-icon-odometer", title: "正品低价", msg: "各大厂商直接供货" },
        { ico: "el-icon-odometer", title: "正品低价", msg: "各大厂商直接供货" }
      ],
      footerM: [
        {
          title: "新手上路",
          listMsg: ["购物流程", "订单查询", "常见问题"]
        },
        {
          title: "支付方式",
          listMsg: ["网上支付", "公司转账", "货到付款"]
        },
        {
          title: "配送服务",
          listMsg: ["配送范围及收费标准", "订单进度查询", "验货与签收"]
        },
        {
          title: "售后服务",
          listMsg: ["退换货政策", "退换货流程", "退款说明"]
        }
      ]
    };
  },
  components: {}
};
</script>

<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";
.footerBOX {
  margin-top: 100px;
  color: #00000096;
  .lxp1 {
    margin-top: 20px;
    color: #e20d0d;
    font-size: 30px;
    font-weight: 800;
  }
  .lxhr {
    border: 1px red solid;
    width: 80%;
    margin: 0px auto;
  }
  .xlcom {
    color: #e20d0d;
    font-size: 25px;
    font-weight: 800;
  }
  p {
    text-align: center;
    font-size: 14px;
  }
  .footImg {
    text-align: center;
    padding: 10px;
    img {
      width: 80px;
      height: 20px;
    }
  }

  .footerM {
    float: left;
    margin-right: 30px;
    margin-top: 25px;
    text-align: center;
    span {
      display: block;
      font-size: 16px;
      margin-bottom: 15px;
      cursor: pointer;
    }
    li {
      cursor: pointer;
      font-size: 14px;
      text-decoration: none;
      margin-bottom: 5px;
    }
    li:hover {
      color: $main-color12;
    }
  }
  .footerIcoList {
    text-align: center;
    text-align: left;
    cursor: pointer;
    // li {
    //   height: 100px;
    //   width: 20%;
    //   float: left;
    // }
    div {
      width: 20%;
      height: 80px;
      // background-color: wheat;
    }
    i {
      font-size: 50px;
      font-weight: 600;
      color: #f1494996;
      margin-right: 15px;
    }

    span {
      display: block;
    }
    i:hover {
      color: $main-color12;
    }
    .span1 {
      font-size: 16px;
      margin-top: 10px;
    }
    .span2 {
      font-size: 14px;
    }
    .span1,
    .span2,
    i {
      $timer: 0.5s;
      transition: $timer;
      -moz-transition: $timer; /* Firefox 4 */
      -webkit-transition: $timer; /* Safari 和 Chrome */
      -o-transition: $timer; /* Opera */
    }

    .span2:hover,
    .span1:hover {
      color: #3f3f3f96;
    }
  }
  .hrbox {
    border: 1px #f4f4f4 solid;
  }
  .erm {
    text-align: right;
    .img {
      width: 140px;
      height: 140px;
      background-color: white;
      margin-right: 150px;
      padding: 10px;
      cursor: pointer;
      img {
        width: 100%;
      }
    }
    .msg {
      .iphone {
        cursor: pointer;
        font-size: 30px;
        font-weight: 400;
        text-align: right;
      }
    }
  }

  .lxfsimg {
    float: right;
    width: 160px;
  }
}
.footer-info {
  margin-top: 0px;
  padding-top: 15px;
}
.footer-info {
  width: 100%;
  min-width: 1210px;
  height: auto;
  padding: 25px 0 15px;
  font-size: 12px;
  background: #34495e;
  color: rgb(255, 255, 255);
  display: inline-block;
  position: relative;
}
.footer-info .info-text {
  width: 1210px;
  margin: 0 auto;
  text-align: center;
  .nav-bottom {
  }
  i,
  em {
    font-style: normal;
  }
}
.footer-info .info-text {
  width: 1210px;
  margin: 0 auto;
  text-align: center;
  em,
  a {
    color: white;
    margin: 5px 5px;
  }
}
</style>
